type DatePicker = formDatePickerProps & DatePickerEvents;
type DatePickerChangeCallback = (value: any) => void;
type DatePickerBlurCallback = (instance: any) => void;
type DatePickerFocusCallback = (instance: any) => void;

export interface formDatePickerProps {
  /**
   * 完全只读
   */
  readonly?: boolean;
  /**
   * 禁用
   */
  disabled?: boolean;
  /**
   * 文本框可输入
   */
  editable?: boolean;
  /**
   * 是否显示清除按钮
   */
  clearable?: boolean;
  /**
   * 输入框尺寸
   */
  size?: "large" | "small" | "mini";
  /**
   * 非范围选择时的占位内容
   */
  placeholder?: string;
  /**
   * 范围选择时开始日期的占位内容
   */
  startPlaceholder?: string;
  /**
   * 范围选择时结束日期的占位内容
   */
  endPlaceholder?: string;
  /**
   * 显示类型
   */
  type?: "year" | "month" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange";
  /**
   * 显示在输入框中的格式
   */
  format?: string;
  /**
   * 对齐方式
   */
  align?: "left" | "center" | "right";
  /**
   * DatePicker 下拉框的类名
   */
  popperClass?: string;
  /**
   * 当前时间日期选择器特有的选项参考下表
   */
  pickerOptions?: {
    [key: string]: any;
  };
  /**
   * 选择范围时的分隔符
   */
  rangeSeparator?: string;
  /**
   * 可选，选择器打开时默认显示的时间
   */
  defaultValue?: Date;
  /**
   * 范围选择时选中日期所使用的当日内具体时刻
   */
  defaultTime?: string[];
  /**
   * 可选，绑定值的格式。不指定则绑定值为 Date 对象
   */
  valueFormat?: string;
  /**
   * 原生属性
   */
  name?: string;
  /**
   * 在范围选择器里取消两个日期面板之间的联动
   */
  unlinkPanels?: boolean;
  /**
   * 自定义头部图标的类名
   */
  prefixIcon?: string;
  /**
   * 自定义清空图标的类名
   */
  clearIcon?: string;
  /**
   * 输入时是否触发表单的校验
   */
  validateEvent?: boolean;
}

interface DatePickerEvents {
  /**
   * 选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效
   * @param options 选中日期的相关信息
   */
  onPick?: (options: { maxDate: Date; minDate: Date }) => void;
}

interface Shortcut {
  /**
   * 快捷选项文本
   */
  text: string;
  /**
   * 点击快捷选项时触发的回调函数
   */
  onClick: () => void;
}

type DisabledDateFunction = (date: Date) => boolean;

export interface formDatePickerOptionsProps {
  shortcuts?: Shortcut[];
  disabledDate?: DisabledDateFunction;
  firstDayOfWeek?: number;
}

interface DatePickerEvents {
  /**
   * 用户确认选定的值时触发
   * @param value 组件绑定值，格式与绑定值一致，可受 value-format 控制
   */
  change?: DatePickerChangeCallback;
  /**
   * 当 input 失去焦点时触发
   * @param instance 组件实例
   */
  blur?: DatePickerBlurCallback;
  /**
   * 当 input 获得焦点时触发
   * @param instance 组件实例
   */
  focus?: DatePickerFocusCallback;
}

interface DatePickerEvents {
  /**
   * 用户确认选定的值时触发
   * @param value 组件绑定值，格式与绑定值一致，可受 value-format 控制
   */
  change?: DatePickerChangeCallback;
  /**
   * 当 input 失去焦点时触发
   * @param instance 组件实例
   */
  blur?: DatePickerBlurCallback;
  /**
   * 当 input 获得焦点时触发
   * @param instance 组件实例
   */
  focus?: DatePickerFocusCallback;
}
